<template>
  <p class="title" v-if="!isLoading && !LoginMessage">
    欢迎回来，{{ userInfo.display_name || "游客" }}
  </p>
  <p class="title" v-if="isLoading && !LoginMessage">登陆中...</p>
  <p class="title" v-if="LoginMessage">
    {{ LoginMessage }},
    <a
      @click="handleLoginClick"
      style="cursor: pointer; text-decoration: underline"
      >Retry?</a
    >
  </p>
  <p class="quote">
    欢迎来到大帅哥的空间，提供了一些有趣的资源和日常。<a
      @click="handleLoginClick"
      style="color: #007bff; cursor: pointer"
      v-if="!userInfo.email"
      >点击这里登录</a
    >
    <a
      href="https://login.zhuchundashuaige.com/"
      style="color: #007bff; cursor: pointer"
      v-if="userInfo.email"
      >账户管理</a
    >
  </p>
</template>

<script setup>
const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false,
  },
  LoginMessage: {
    type: String,
    default: "",
  },
  userInfo: {
    type: Object,
    default: () => ({}),
  },
  handleLoginClick: {
    type: Function,
    default: () => {},
  },
});
</script>

<style scoped>
.title {
  font-size: 1.5rem;
  color: #2196f3;
  margin-top: 5px;
}

.quote {
  font-style: italic;
  color: #546e7a;
  margin-top: 5px;
}
</style>
